<template>
  <div>
    <div>
      <br>
      <br>
      <el-button type="primary" plain @click="dialogFormVisible = true"
                 style="position: absolute;left: 330px;top: 72px;">添加</el-button>
      <el-dialog title="添加" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item label="姓名">
            <el-input v-model="add.name" style="width: 260px"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="add.sex" style="width: 260px"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input  v-model="add.idcard" style="width: 270px"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="add.phone" style="width: 260px"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="add.site" style="width: 260px"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="add.rid" placeholder="请选择角色">
              <el-option v-for="item in findroles" :label="item.rname" :key="item.rid" :value="item.rid"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="adds()">确 定</el-button>
        </div>
      </el-dialog>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="uid"
          label="编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="180">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号">
        </el-table-column>
        <el-table-column
          prop="site"
          label="地址">
        </el-table-column>
        <el-table-column prop="entry" label="创建时间时间" :formatter="dateFormat"></el-table-column>
        <el-table-column
          prop="rname"
          label="职位">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="dialogFormVisible2=true;users=scope.row"></el-button>
            <el-button
              size="mini"
              type="danger" icon="el-icon-delete"
              @click="delete1(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        layout="total,prev, pager, next"
        :page-size="pageSize"
        :total="total" @current-change="page">
      </el-pagination>


      <el-dialog title="用户修改" :visible.sync="dialogFormVisible2">
        <el-form :model="users">
          <el-form-item label="编号">
            <el-input v-model="users.uid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  label="名称" >
            <el-input v-model="users.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  label="性别" >
            <el-input v-model="users.sex" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item  label="手机号" >
            <el-input v-model="users.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item  label="地址" >
            <el-input v-model="users.site" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="时间" :formatter="dateFormat">
            <el-date-picker disabled=""
              v-model="users.entry"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="users.rid" placeholder="请选择角色">
              <el-option v-for="item in findroles" :label="item.rname" :key="item.rid" :value="item.rid"></el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="upd()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "User",

  data(){
    return  {
      dialogFormVisible: false,
      dialogFormVisible2: false,
      users:{},
      total: 0,
      pageSize: 6,
      tableData: [],
      findroles:[],
      add:{name:"",sex:"",phone:"",idcard:"",site:"",rid:""}
    };
  },
  //初始化
  created() {
   this.find()
    this.findrole()
  },
  methods:{
    find(){
      this.$http.post("backservice/user/find?pageNum=0&pageSize=" + this.pageSize).then(response => {
        console.log(response.userList)
        this.tableData = response.userList
        this.total = response.TotalNum
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    page(currentPage) {
      this.$http.post('backservice/user/find?&pageNum=' + (currentPage - 1) + '&pageSize=' + this.pageSize)
        .then(response => {
          this.tableData = response.userList
        })
    },
    findrole(){
      this.$http.post('backservice/role/find').then(data=>{
        console.log(data)
          this.findroles=data
      })
    },
    adds(){
      this.dialogFormVisible = false
      this.$http.post('backservice/user/add',this.add).then(data=>{
        if (data>0){
          this.find()
          alert("添加成功")
        }else {
          alert("添加失败")
        }
      })
    },
    upd(){
      this.dialogFormVisible2 = false
      this.$http.post("backservice/user/update",this.users).then(data=>{
        if (data>0){
          this.find()
          alert("修改成功")
        }else {
          alert("修改失败")
        }
      })
    },
    delete1(row){
      var f=new FormData()
      f.append("uid",row.uid)
        this.$http.post("backservice/user/delete",{uid:row.uid}).then(data=>{
          console.log(row.uid)
          if (data>0){
            this.find()
            alert("删除成功")
          }else {
            alert("删除失败")
          }
        })
    },
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property]
      if (daterc != null) {
        var date = new Date(daterc);
        var year = date.getFullYear();
        /* 在日期格式中，月份是从0开始，11结束，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      }
    }
  }

}
</script>

<style>
</style>
